import { Component, OnInit, TemplateRef } from '@angular/core';
import { NzDrawerService } from 'ng-zorro-antd/drawer';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { SysUserService } from '../../../service/sys-user.service';
import { DataFormComponent } from '../../common/data-form/data-form.component';
import { SysUser } from '../../../model/sys-user.model';


@Component({
  selector: 'app-sys-user',
  templateUrl: './sys-user.component.html',
  styleUrls: ['./sys-user.component.less'],
})

export class SysUserComponent implements OnInit {

  total = 1;
  loading = false;

  query = {
    page: '1',
    limit: '20'
  };

  searchFormGroup!: FormGroup;

  searchForm = [
    {
      type: 'string',
      placeholder: '账户',
      name: 'username',
      value: null,
      show: true
    },
    {
      type: 'string',
      placeholder: '姓名',
      name: 'realName',
      value: null,
      show: true
    },
    {
      type: 'string',
      placeholder: '邮箱',
      name: 'email',
      value: null,
      show: true
    }
  ];

  userList: SysUser[];

  // 定义表格
  tableData = [
    {
      title: '账户',
      name: 'username',
      value: null,
      show: true
    },
    {
      title: '姓名',
      name: 'realName',
      value: null,
      show: true
    },
    {
      title: '邮箱',
      name: 'email',
      value: null,
      show: true
    },
    {
      title: '手机',
      name: 'mobile',
      value: null,
      show: true
    },
    {
      title: '状态',
      name: 'status',
      value(value) {
        return value + '1111111111';
      },
      show: true
    }
  ];

  constructor(private nzDrawerService: NzDrawerService, private fb: FormBuilder,
    private sysUserService: SysUserService) {
  }

  /**
   * 搜索
   */
  searchData() {
    // 组装查询参数
    const templateQuery = {
      page: '1',
      limit: '10'
    };
    templateQuery.page = this.query.page;
    templateQuery.limit = this.query.limit;

    this.searchForm.map(searchItem => {
      if (searchItem.value != null) {
        templateQuery[searchItem.name] = searchItem.value;
      }
    });
    this.sysUserService.getSysUserPage({ params: templateQuery }).subscribe((res: any) => {
      this.total = res.data.total;
      this.userList = res.data.list;
    });
  }

  /**
   * 初始化时加载数据
   */
  loadData() {
    this.searchData();
  }

  resetForm(): void {
    this.searchFormGroup.reset();
    this.searchData();
  }

  showDetail(id: string) {
    // 查询具体用户数据
    this.sysUserService.getSysUserById(id).subscribe((res: any) => {
      const userDetail = res.data;
      this.nzDrawerService.create({
        nzTitle: '详情',
        nzWidth: 1024,
        nzContent: DataFormComponent,
        nzContentParams: {
          data: userDetail,
          keys: Object.keys(userDetail)
        }
      });
    });
  }
  edit(id: string) {
    this.sysUserService.getSysUserById(id).subscribe((res: any) => {
      const userDetail = res.data;
      let drawerRef = this.nzDrawerService.create({
        nzTitle: '修改',
        nzWidth: 1024,
        nzContent: DataFormComponent,
        nzContentParams: {
          edit: true,
          data: userDetail,
          keys: Object.keys(userDetail),
          saveFunction: () => {
            this.sysUserService.updateUser(userDetail).subscribe((res: any) => {
              // 刷新主表数据
              this.loadData();
              // 关闭抽屉
              drawerRef.close()
            })
          }
        },
      });

    });
  }
  ngOnInit(): void {
    this.loadData();
    this.searchFormGroup = this.fb.group({});
    this.searchForm.map(searchItem => {
      this.searchFormGroup.addControl(searchItem.name, new FormControl());
    });
  }


}
